<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>录入学生面部信息</title>
    <meta charset="utf-8">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            text-align: center;
        }

        #faceRecognitionForm {
            text-align: center;
            margin-bottom: 20px;
        }

        #cameraContainer {
            width: 100%;
            text-align: center;
        }

        #cameraView {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 0 auto;
        }

        #captureBtn {
            display: block;
            margin: 10px auto;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        #resultDiv {
            text-align: center;
            font-weight: bold;
            font-size: 18px;
        }
    </style>
</head>
<body>
<h1>人脸识别</h1>
<form id="faceRecognitionForm" enctype="multipart/form-data">
    <div id="cameraContainer">
        <video id="cameraView" autoplay></video>
    </div>
    <button type="button" id="captureBtn">拍照</button>
</form>

<div id="resultDiv"></div>
<script src="../senshi_official_website/static/js/jquery.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var video = document.getElementById('cameraView');
        var captureBtn = document.getElementById('captureBtn');
        var resultDiv = document.getElementById('resultDiv');
        var mediaStream = null;
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');

        // 检测浏览器是否支持 getUserMedia API
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({video: true})
                .then(function (stream) {
                    video.srcObject = stream;
                    mediaStream = stream;
                })
                .catch(function (error) {
                    console.log('Error accessing camera: ' + error);
                });
        } else {
            console.log('getUserMedia API is not supported by this browser.');
        }

        captureBtn.addEventListener('click', function () {
            if (mediaStream) {
                // 将视频帧绘制到画布上
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                context.drawImage(video, 0, 0, canvas.width, canvas.height);

                // 将画布内容转换为图片数据
                canvas.toBlob(function (blob) {
                    // 创建FileReader对象读取图片文件
                    var reader = new FileReader();
                    reader.onloadend = function () {
                        // 将读取的结果转换为字节数组
                        var imageData = canvas.toDataURL('image/jpeg').split(',')[1];

                        // 发送人脸识别请
                        console.log(imageData)


                        let faceRecognitionRequest = {
                            imageData: imageData,
                            faceToken: null,
                            id:${sessionScope.consumer.consumerId}
                        };
                        faceRecognitionRequest = JSON.stringify(faceRecognitionRequest);
                        console.log(faceRecognitionRequest)
                        $.ajax({
                            url: '/face/addFace', // 请求路径
                            type: 'POST',
                            data: faceRecognitionRequest,
                            "dataType": "json",
                            "contentType": "application/json;charset=utf-8",
                            success: function (response) {
                                console.log(response)
                                alert(response.msg)
                            },
                            error: function (xhr, status, error) {
                                console.log('Error: ' + error);
                            }
                        });
                    };

                    // 读取Blob数据
                    reader.readAsArrayBuffer(blob);
                }, 'image/jpeg');
            }
        });
    });
</script>
</body>
</html>
